<template>
  <div class="activities">
    <!-- 头部 -->
    <van-nav-bar title="全部活动" @click-left="onClickLeft">
      <template #left>
        <img src="@/assets/images/线下活动/xxhd-1@2x.png" alt="" />
      </template>
    </van-nav-bar>
    <!-- 导航 -->
    <van-tabs v-model:active="active" line-height="5" line-width="21">
      <!-- 线下活动 -->
      <van-tab title="线下活动">
        <!-- 城市/时间/主题筛选 -->
        <city-time-select />
        <!-- 线下活动--主体部分 -->
        <activities-main />
      </van-tab>
      <!-- 线上活动 -->
      <van-tab title="线上活动">线上活动</van-tab>
    </van-tabs>
    <!-- 底部 -->
    <footer>
      <ul>
        <router-link
          v-for="value of footerList"
          :key="value.title"
          class="li"
          :to="value.path"
        >
          <img :src="value.imgUrl" alt="" />
          <p>{{ value.title }}</p>
        </router-link>
      </ul>
    </footer>
  </div>
</template>

<script>
import router from "@/router";
import { ref, reactive } from "vue";
import CityTimeSelect from "@/components/Activities/CityTimeSelect.vue";
import ActivitiesMain from "../components/Activities/ActivitiesMain.vue";
export default {
  components: {
    CityTimeSelect,
    ActivitiesMain,
  },
  setup() {
    const onClickLeft = () => router.go(-1);
    const active = ref(0);
    // 底部列表
    const footerList = reactive([
      {
        title: "全部活动",
        imgUrl: require("@/assets/images/线下活动/xxhd-23@2x.png"),
        path: "/activity",
      },
      {
        title: "我的活动",
        imgUrl: require("@/assets/images/线下活动/xxhd-24@2x(1).png"),
        path: "/activities",
      },
    ]);
    return {
      onClickLeft,
      active,
      footerList,
    };
  },
};
</script>

<style lang="less">
.activities {
  font-family: PingFang SC;
  font-weight: bold;
  color: #333333;
  // 头部
  .van-nav-bar__left {
    img {
      width: 12px;
      height: 19px;
    }
  }
  // 头部标题
  .van-nav-bar__title {
    font-size: 16px;
  }
  // 导航
  .van-tabs__nav {
    width: 190px;
    .van-tabs__line {
      background-color: #ffd005;
    }
    .van-tab {
      font-size: 14px;
      font-weight: normal;
      // 选中状态
      &.van-tab--active {
        font-size: 16px;
        font-weight: bold;
      }
    }
  }
  // 底部
  footer {
    height: 50px;
    border-top: 1px solid #e6e6e6;
    position: fixed;
    left: 0;
    bottom: 0;
    background-color: white;
    width: 100%;
    ul {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-around;
      .li {
        display: flex;
        flex-direction: column;
        align-items: center;
        img {
          width: 19px;
          height: 22px;
          margin-bottom: 6px;
        }
        p {
          font-size: 10px;
        }
      }
    }
  }
}
</style>
